<template>
    <view class="settle">
        <view class="settle_wrap">
            <view class="settle_goods">
                <p>Items</p>
                <ul>
                    <li v-for="(item, index) in items" :key="index">
                        <dl>
                            <dt v-if="item.imgurls">
                                <image
                                    :src="item.imgurls.split(',')[0]"
                                    mode=""
                                ></image>
                            </dt>
                            <dd>
                                <view class="goods_item">
                                    <text>{{ item.name }}</text>
                                    <text style="font-weight: bold"
                                        >{{ item.discount_price }}Egp</text
                                    >
                                </view>
                                <view
                                    class="goods_item"
                                    style="font-size: 24rpx"
                                >
                                    <text style="color: #9e6b47"
                                        >Quantity: {{ item.numbers }}</text
                                    >
                                    <text class="line"
                                        >{{ item.origin_price }}Egp</text
                                    >
                                </view>
                            </dd>
                        </dl>
                    </li>
                </ul>
                <p style="margin-top: 50rpx">Payment</p>
                <view class="pay_ul">
                    <view class="pay_item">
                        <view class="pay_left">
                            <image
                                src="/static/business/pay_01.png"
                                mode=""
                            ></image>
                            <text>Coupon deduction amount</text>
                        </view>
                        <view class="pay_right" @click.stop="isCoupon = true">
                            <text>-{{ info.coupon_money || "0" }}Egp</text>
                            <image
                                src="/static/business/arrow_right.png"
                                mode=""
                            ></image>
                        </view>
                    </view>
                    <view class="pay_item">
                        <view class="pay_left">
                            <image
                                src="/static/business/pay_02.png"
                                mode=""
                            ></image>
                            <text>Total</text>
                        </view>
                        <text>{{ info.pay_money }}Egp</text>
                    </view>
                    <!-- <view class="pay_item">
						<view class="pay_left">
							<image src="/static/business/pay_02.png" mode=""></image>
							<text>Discount amount</text>
						</view>
						<text>{{info.promotion_money}}Egp</text>
					</view> -->
                </view>
                <!--  -->
                <view class="pay_header bg-white"> Payment method </view>
                <view class="pay_list">
                    <ul>
                        <li
                            v-for="(item, index) in methodList"
                            :key="index"
                            @click.stop="onMethods(item, index)"
                        >
                            <view class="pay_left row">
                                <image :src="item.logo"></image>
                                <text>{{
                                    locale == "en" ? item.name_en : item.name_ar
                                }}</text>
                            </view>
                            <image
                                src="@/static/select.png"
                                mode="widthFix"
                                v-if="methodsIndex == index"
                            ></image>
                        </li>
                    </ul>
                </view>
                <view class="pay_header bg-white"> Currency </view>
                <view class="pay_list">
                    <ul>
                        <li
                            v-for="(item, index) in currencyList"
                            :key="index"
                            @click.stop="handleCurrency(item, index)"
                        >
                            <text>{{ item }}</text>
                            <image
                                src="@/static/select.png"
                                mode="widthFix"
                                v-if="currencyIndex == index"
                            ></image>
                        </li>
                    </ul>
                </view>
                <!-- up -->
                <view class="reserve_item">
                    <!-- <view class="item_title">{{ $t('full.name') }}</view>
					<view class="phoneInput">
						<input type="text" v-model="firstname" autocomplete="off" :always-embed="true" :adjust-position="true"
							cursor-spacing="240" placeholder="First name" />
				
					</view>
					<view class="phoneInput">
						<input type="text" v-model="lastname" autocomplete="off" :always-embed="true" :adjust-position="true"
							cursor-spacing="240" placeholder="Last name" />
					</view> -->
                    <view
                        class="phoneInput"
                        v-if="methodInfo && methodInfo.paymentId == 4"
                    >
                        <input
                            type="text"
                            v-model="phone"
                            placeholder="Phone"
                        />
                    </view>
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="footer_left">
                <p>{{ info.pay_money }}Egp</p>
                <text>{{ info.origin_money }}Egp</text>
            </view>
            <view
                class="footer_btn"
                :style="{ background: isRequesting ? '#cdcdcd' : '#FA751F' }"
                @click.stop="handlePay"
            >
                Pay Now
            </view>
        </view>
        <u-popup
            :show="isCoupon"
            :round="10"
            :closeable="true"
            @close="isCoupon = false"
        >
            <view class="coupon_wrap">
                <view class="coupon_title">{{ $t("coupon.text") }}</view>
                <ul v-if="couponList.length > 0">
                    <li
                        class="row"
                        :class="{ coupon_active: couponIndex == index }"
                        v-for="(item, index) in couponList"
                        :key="index"
                        @click.stop="couponSelected(item, index)"
                    >
                        <view class="coupon_left">
                            <p>{{ item.money }}</p>
                            <span>EGP</span>
                        </view>
                        <view class="coupon_right">
                            <span>period of validity</span>
                            <p>{{ item.expireDate }}</p>
                        </view>
                    </li>
                </ul>
                <p class="know" v-if="couponList.length <= 0">
                    No discounts available at the moment
                </p>
                <view class="coupon_footer row" v-if="couponList.length > 0">
                    <view class="concel" @click.stop="isCoupon = false"
                        >CANCEL</view
                    >
                    <view class="confirm" @click.stop="couponConfirm"
                        >CONFIRM</view
                    >
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { getSettlement, getOrderCreate } from "@/lib/business.js";
import { myCoupon } from "@/lib/service";
// "USD", "SAR", "AED", "KWD", "QAR", "BHD"
export default {
    data() {
        return {
            shopid: "",
            items: [],
            list: [],
            goodsList: [],
            methodList: [],
            currencyList: [],
            methodsIndex: 0,
            methodInfo: null,
            currencyList: ["EGP"],
            currency: "EGP",
            currencyIndex: 0,
            firstname: "",
            lastname: "",
            phone: "",
            isCoupon: false,
            couponIndex: 0,
            couponid: "",
            couponList: [],
            isRequesting: false,
            info: {},
        };
    },
    computed: {
        locale() {
            return this.$store.state.language;
        },
    },
    onLoad(options) {
        this.shopid = options.shopid;
        this.goodsList = JSON.parse(options.items);
        this.handleSettlement();
        this.handleMethods();
        this.handleCoupon();
    },
    methods: {
        handleCoupon() {
            myCoupon().then((res) => {
                this.couponList = res.data.list || [];
                console.log("coupon/////////////", res);
            });
        },
        handleSettlement() {
            let obj = {
                shopid: this.shopid,
                items: this.goodsList,
            };
            if (this.couponid) {
                obj["couponid"] = this.couponid;
            }
            getSettlement(obj).then((res) => {
                this.info = res.data;
                this.items = res.data.itemlist || [];
            });
        },
        handleMethods() {
            let _this = this;
            uni.request({
                url: "https://app.fawaterk.com/api/v2/getPaymentmethods",
                method: "GET",
                header: {
                    "Content-Type": "application/json",
                    Authorization:
                        "Bearer 899fa314b849de3a21b68fd4b3993a443f93fc905b537107db",
                },
                data: {
                    method: "GET",
                    redirect: "follow",
                },
                success: (res) => {
                    _this.methodList = res.data.data;
                    _this.methodInfo = _this.methodList[0];
                },
                fail: (err) => {
                    console.error("API调用失败:", err);
                    uni.showToast({
                        title: "网络错误，请重试",
                        icon: "none",
                    });
                },
            });
        },
        onMethods(item, index) {
            this.methodsIndex = index;
            this.methodInfo = item;
        },
        couponSelected(item, index) {
            this.couponIndex = index;
        },
        couponConfirm() {
            this.couponid = this.couponList[this.couponIndex].id;
            this.handleSettlement();
            this.isCoupon = false;
        },
        handleCurrency(item, index) {
            this.currencyIndex = index;
            this.currency = item;
        },
        handlePay() {
            let _this = this;

            // if (!_this.firstname) {
            //     uni.showToast({
            //         title: "Please enter your first name",
            //         icon: "none",
            //     });
            //     return;
            // }
            // if (!_this.lastname) {
            //     uni.showToast({
            //         title: "Please enter your last name",
            //         icon: "none",
            //     });
            //     return;
            // }
            if (_this.methodInfo.paymentId == 4 && !_this.phone) {
                uni.showToast({
                    title: "Please enter your phone number",
                    icon: "none",
                });
                return;
            }
            // 防止重复点击
            if (_this.isRequesting) return;
            _this.isRequesting = true;
            let obj = {
                settleno: this.info.settleno,
                method:
                    this.locale == "en"
                        ? this.methodInfo.name_en
                        : this.methodInfo.name_ar,
                currency: this.currency,
                // firstname: this.firstname,
                // lastname: this.lastname,
            };
            // https://www.babahabibi.com
            getOrderCreate(obj).then((res) => {
                if (res.statusCode == 0) {
                    let requestData = {
                        payment_method_id: _this.methodInfo.paymentId,
                        cartTotal: _this.info.pay_money,
                        currency: _this.currency,
                        redirectOption: true,
                        redirectionUrls: {
                            successUrl:
                                "https://testa.anta123.com/pages/index/reserve/success",
                            failUrl:
                                "https://testa.anta123.com/pages/index/reserve/fail",
                            pendingUrl:
                                "https://testa.anta123.com/pages/index/reserve/pending?orderno=",
                        },
                        customer: {},
                        // customer: {
                        //     first_name: _this.firstname,
                        //     last_name: _this.lastname,
                        // },
                        payLoad: {
                            orderno: res.data.orderno,
                        },
                        cartItems: [
                            {
                                name: "test",
                                price: _this.info.pay_money,
                                quantity: "1",
                            },
                        ],
                    };
                    if (_this.methodInfo.paymentId == 4) {
                        requestData.customer["phone"] = _this.phone;
                    }
                    uni.request({
                        url: "https://app.fawaterk.com/api/v2/invoiceInitPay",
                        method: "POST",
                        header: {
                            "Content-Type": "application/json",
                            Authorization:
                                "Bearer 899fa314b849de3a21b68fd4b3993a443f93fc905b537107db",
                        },
                        data: requestData,
                        success: (res) => {
                            if (res.data.data.payment_data.redirectTo) {
                                // 请求完成后重置状态
                                _this.isRequesting = false;
                                uni.navigateTo({
                                    url: `/pages/index/reserve/go?url=${res.data.data.payment_data.redirectTo}`,
                                });
                            } else {
                                _this.isRequesting = false;
                                uni.showToast({
                                    title: `错误: ${res.data.data.payment_data.error}`,
                                    icon: "none",
                                });
                            }
                        },
                        fail: (err) => {
                            _this.isRequesting = false;
                            console.error("API调用失败:", err);
                            uni.showToast({
                                title: "网络错误，请重试",
                                icon: "none",
                            });
                        },
                    });
                } else {
                    _this.isRequesting = false;
                    uni.showToast({
                        title: res.message,
                        icon: "none",
                    });
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.settle {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(180deg, #fa751f 0%, rgba(250, 117, 31, 0) 50%);

    .settle_wrap {
        margin: 36rpx 28rpx;
        background: #ffffff;
        border-radius: 36rpx 36rpx 0rpx 0rpx;
        padding: 48rpx 32rpx;
        padding-bottom: 140rpx;

        .settle_goods {
            > p {
                font-weight: bold;
                font-size: 36rpx;
                color: #1c120d;
                line-height: 46rpx;
            }

            ul {
                > li {
                    margin-top: 24rpx;

                    dl {
                        display: flex;
                        justify-content: space-between;

                        dt {
                            width: 112rpx;
                            height: 112rpx;
                            background: #f5f5f5;
                            border-radius: 12rpx;

                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        dd {
                            flex: 1;
                            margin-left: 24rpx;

                            .goods_item {
                                display: flex;
                                justify-content: space-between;
                                font-size: 32rpx;
                                color: #1c120d;
                                padding-bottom: 10rpx;

                                .line {
                                    text-decoration: line-through;
                                    color: #999;
                                    font-size: 24rpx;
                                }
                            }
                        }
                    }
                }
            }

            .pay_ul {
                .pay_item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 40rpx;

                    > text {
                        display: inline-block;
                        font-weight: bold;
                        font-size: 40rpx;
                        color: #1c120d;
                    }

                    .pay_left {
                        display: flex;
                        align-items: center;

                        image {
                            width: 36rpx;
                            height: 36rpx;
                            margin-right: 8rpx;
                        }

                        text {
                            font-size: 28rpx;
                            color: #1c120d;
                        }
                    }

                    .pay_right {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 190rpx;
                        height: 44rpx;
                        background: linear-gradient(
                            90deg,
                            #f7b500 0%,
                            #fc721a 100%
                        );
                        border-radius: 50rpx;

                        text {
                            font-size: 26rpx;
                            display: inline-block;
                            color: #fff;
                        }

                        image {
                            width: 28rpx;
                            height: 28rpx;
                        }
                    }
                }
            }
        }
        .pay_header {
            padding: 32rpx 0;
            font-family: Microsoft YaHei UI;
            font-weight: 600;
            font-size: 36rpx;
            color: #333333;
        }
        .pay_list {
            padding: 0 24rpx;
            background: #f9f9f9;
            ul {
                li {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 24rpx 0;
                    border-bottom: 1px solid #f1f1f1;
                    .pay_left {
                        > image {
                            width: 80rpx;
                            height: 32rpx;
                            margin-right: 30rpx;
                        }

                        text {
                            font-family: Noto Sans S Chinese;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #1e1e1e;
                        }
                    }
                    > image {
                        width: 34rpx;
                    }
                }
            }
        }

        .reserve_item {
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            font-size: 26rpx;
            position: relative;
            padding: 32 0rpx;
            margin-top: 24rpx;

            .phoneInput {
                width: 640rpx;
                height: 88rpx;
                background: #f3f3f3;
                border-radius: 10rpx;
                margin-top: 24rpx;

                input {
                    width: 90%;
                    height: 88rpx;
                    padding-left: 30rpx;
                    font-family: Microsoft YaHei UI;
                    font-weight: 400;
                    font-size: 30rpx;
                    color: #333333;
                }
            }

            .item_title {
                font-family: Microsoft YaHei UI;
                font-weight: 400;
                font-size: 42rpx;
                color: #333333;
            }
        }

        .pay_price {
            padding: 0 32rpx;
        }
    }
}

.footer {
    width: 100%;
    height: 130rpx;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28rpx;

    .footer_left {
        p {
            font-weight: bold;
            font-size: 40rpx;
            color: #fa751f;
        }

        text {
            font-size: 28rpx;
            color: #999;
            text-decoration: line-through;
        }
    }

    .footer_btn {
        width: 290rpx;
        height: 96rpx;
        background: #fa751f;
        border-radius: 50rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;
        text-align: center;
        line-height: 96rpx;
        margin-right: 58rpx;
    }
}
.coupon_wrap {
    width: 100%;

    .coupon_title {
        text-align: center;
        padding: 38rpx 0;
    }

    ul {
        margin: 0 64rpx;

        .coupon_active {
            width: 100%;
            height: 120rpx;
            background: url("/static/coupon_selected.png") no-repeat !important;
            background-size: 100% 100% !important;
            margin-bottom: 16rpx;
        }

        li {
            width: 100%;
            height: 120rpx;
            background: url("/static/coupon_bg_01.png") no-repeat;
            background-size: 100% 100%;
            margin-bottom: 16rpx;

            .coupon_left {
                color: #ffffff;
                width: 206rpx;
                height: 120rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                    font-family: Microsoft YaHei UI;
                    font-weight: 400;
                    font-size: 22rpx;
                    margin-left: 8rpx;
                    display: inline-block;
                    margin-top: 12rpx;
                }
            }

            .coupon_right {
                padding-left: 20rpx;

                span {
                    display: block;
                    font-family: Microsoft YaHei UI;
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #999999;
                }

                p {
                    padding: 0;
                    font-family: Microsoft YaHei UI;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                    margin-top: 12rpx;
                }
            }
        }
    }

    .know {
        text-align: center;
        padding: 200rpx 0;
        color: #999999;
    }

    .coupon_footer {
        margin: 40rpx 32rpx;
        justify-content: space-between;

        .confirm {
            background: #ff3c15;
            font-size: 32rpx;
        }

        view {
            width: 316rpx;
            height: 90rpx;
            background: #4980f7;
            border-radius: 45rpx;
            font-family: Microsoft YaHei UI;
            font-weight: 400;
            font-size: 32rpx;
            color: #fefefe;
            line-height: 90rpx;
            text-align: center;
        }
    }
}
</style>
